<template>
  <div class="container">
    <img
      src="../../static/icons/logo.png"
      alt="logo"
      style="width: 180px; height: 180px"
    />
    <span
      style="font-size: 40px; font-family: 'Microsoft YaHei',serif; font-weight: bold"
    >
      凤梨网盘
    </span>
    <el-form :model="form" :rules="rules" ref="resetPasswdForm">
      <el-form-item prop="email">
        <el-input
          class="width"
          v-model="form.email"
          placeholder="邮箱"
          type="email"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="verCode">
        <el-input class="width" v-model="form.verCode" placeholder="邮箱验证码">
          <el-button
            style="padding-right:10px"
            slot="suffix"
            type="text"
            :disabled="counter !== 0 || !validEmail"
            @click="sendVerCode"
          >
            {{
              counter > 0
                ? "验证码已发送, " + counter + "秒后再试"
                : "发送验证码"
            }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-form-item prop="passwd">
        <el-input
          class="width"
          v-model="form.passwd"
          placeholder="新密码"
          type="password"
        >
        </el-input>
      </el-form-item>
      <div
        class="width"
        style="text-align: end; color: cornflowerblue; font-weight: bold"
      >
        <router-link to="/login">
          <span>想起密码了?</span>
        </router-link>
      </div>
      <el-button
        class="width"
        type="primary"
        @click="submitForm('resetPasswdForm')"
      >
        重置密码
      </el-button>
    </el-form>
  </div>
</template>
<script>
import {
  checkEmail,
  getRestPasswdVerificationCode,
  resetPasswd
} from "@/api/user";

export default {
  name: "ForgetPasswd",
  data() {
    const _checkEmail = (rule, value, callback) => {
      this.validEmail = false;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      } else if (
        !/^([a-zA-Z\d])(\w|.)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/.test(value)
      ) {
        return callback(new Error("邮箱格式不正确"));
      }

      checkEmail(this.form.email)
        .then(() => {
          this.validEmail = false;
          return callback(new Error("邮箱不存在"));
        })
        .catch(() => {
          this.validEmail = true;
          return callback();
        });
    };

    return {
      form: {
        email: "",
        passwd: "",
        verCode: ""
      },

      validUsername: false,

      validEmail: false,

      counter: 0,

      rules: {
        email: [{ validator: _checkEmail, trigger: "blur", required: true }],
        passwd: [
          {
            trigger: "change",
            min: 6,
            max: 30,
            message: "长度在6到30之间",
            required: true
          }
        ],
        verCode: [
          {
            trigger: "change",
            mini: 5,
            max: 5,
            message: "验证码长度为5",
            required: true
          }
        ]
      }
    };
  },
  methods: {
    sendVerCode() {
      const p = this;
      if (this.counter === 0) {
        this.counter = 30;
        getRestPasswdVerificationCode(this.form.email);
        setInterval(function() {
          if (p.counter > 0) {
            p.counter--;
          }
        }, 1000);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const f = this.form;
          const form = {
            password: f.passwd,
            email: f.email,
            verCode: f.verCode
          };
          const p = this;
          resetPasswd(form).then(() => {
            p.$message.success("重置密码成功！");
            p.$router.replace("/login");
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  .el-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  * {
    margin: 5px;
  }
}
.width {
  width: 350px;
}
</style>
